<template>
  
  <div>
    
    <!-- 图片轮播 -->
    <el-carousel :interval="5000" arrow="always" indicator-position="outside" style="height: 400px;">
      <el-carousel-item v-for="(item, index) in images" :key="index">
        <img :src="item.url" alt="图片" style="width: 100%; height: 100%;">
      </el-carousel-item>
    </el-carousel>

    <div class="flex-container">
      <!-- 出勤率条形图 -->
      <div class="attendance-chart" ref="attendanceChart"></div>

      <!-- 公告栏 -->
      <div class="announcement">
        <h3>公告栏</h3>
        <!-- 添加公告表单 -->
        <form @submit.prevent="addAnnouncement">
          <input v-model="newAnnouncement" type="text" placeholder="输入新公告">
          <button type="submit">添加公告</button>
        </form>

        <!-- 公告列表 -->
        <div v-for="(announcement, index) in announcements" :key="index">
          <p>{{ announcement }}</p>
          <button @click="editAnnouncement(index)">编辑</button>
          <button @click="deleteAnnouncement(index)">删除</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      images: [
        { url: require('D:/ovo/src/images/G1.png') },
        { url: require('D:/ovo/src/images/G2.png') },
        { url: require('D:/ovo/src/images/G3.png') }
      ],
      announcements: [], // 存储公告
      newAnnouncement: '' // 输入新公告的字段
    };
  },
  mounted() {
    // 初始化图表
    this.initChart();
  },
  methods: {
    // 初始化图表
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.attendanceChart);

      // 模拟的出勤率数据
      let attendanceData = [
        { name: '周一', value: 90 },
        { name: '周二', value: 95 },
        { name: '周三', value: 88 },
        { name: '周四', value: 92 },
        { name: '周五', value: 87 },
        { name: '周六', value: 93 },
        { name: '周日', value: 96 }
        // 其他日期的数据...
      ];

      // 指定图表的配置项和数据
      let option = {
        title: {
          text: '出勤率统计',
          left: 'center'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          data: attendanceData.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: attendanceData.map(item => item.value),
          type: 'bar'
        }]
      };

      // 使用刚指定的配置项和数据显示图表
      myChart.setOption(option);
    },
    // 添加公告
    addAnnouncement() {
      if (this.newAnnouncement.trim()) {
        this.announcements.push(this.newAnnouncement.trim());
        this.newAnnouncement = ''; // 清空输入框
      }
    },
    // 编辑公告
    editAnnouncement(index) {
      const editedAnnouncement = prompt('编辑公告', this.announcements[index]);
      if (editedAnnouncement !== null) {
        this.announcements.splice(index, 1, editedAnnouncement.trim());
      }
    },
    // 删除公告
    deleteAnnouncement(index) {
      if (confirm('确定要删除此公告吗？')) {
        this.announcements.splice(index, 1);
      }
    }
  }
};
</script>

<style scoped>
/* 这里可以放置你的样式 */
.attendance-chart {
  width: 50%;
  height: 400px;
}

.announcement {
  width: 50%;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid #ccc;
}

.flex-container {
  display: flex;
}

.announcement form {
  margin-bottom: 10px;
}
</style>
